<template>
  <div class="box">
    <!-- 路由缓存 -->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <!-- 当路由不需要缓存的时候 -->
    <router-view v-if="!$route.meta.keepAlive"></router-view>
    <div class="btmbar" ref="btmbar">
      <router-link to="/Recommend" class="btma">
        <p class="btma-p1">
          <i class="iconfont icon-shouyefill btma-p1-icon"></i>
        </p>
        <p class="btma-p2">首页</p>
      </router-link>
      <router-link :to="classifyRouter" class="btma">
        <p class="btma-p1">
          <i class="iconfont icon-fenlei btma-p1-icon"></i>
        </p>
        <p class="btma-p2">分类</p>
      </router-link>
      <router-link to="/MiMoments" class="btma">
        <p class="btma-p1">
          <i class="iconfont icon-quanzi btma-p1-icon"></i>
        </p>
        <p class="btma-p2">米圈</p>
      </router-link>
      <router-link to="/ShopCar" class="btma">
        <p class="btma-p1">
          <i class="iconfont icon-gouwuche btma-p1-icon"></i>
        </p>
        <p class="btma-p2">购物车</p>
      </router-link>
      <router-link to="/Center" class="btma">
        <p class="btma-p1">
          <i class="iconfont icon-wode btma-p1-icon"></i>
        </p>
        <p class="btma-p2">我的</p>
      </router-link>
    </div>
    <!-- 回到顶部 -->
    <backtop v-if="btnFlag"></backtop>
  </div>
</template>

<script>
import Vue from 'vue'
import { Lazyload, Swipe, SwipeItem } from 'vant'
import backtop from '@/components/backtop/BackTop.vue'
Vue.use(Lazyload, Swipe, SwipeItem)
export default {
  components: {
    backtop
  },
  data () {
    return {
      btnFlag: false,
      classifyRouter: { name: 'Classify', params: { height: 0 } }
    }
  },
  methods: {
    showBacktop () {
      const scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      this.scrollTop = scrollTop
      if (this.scrollTop > 500) {
        this.btnFlag = true
      } else {
        this.btnFlag = false
      }
    }
  },
  mounted () {
    window.addEventListener('scroll', this.showBacktop)
    this.$nextTick(() => {
      this.classifyRouter.params.height = this.$refs.btmbar.offsetHeight
    })
  },
  destroyed () {
    window.removeEventListener('scroll', this.showBacktop())
  }
}
</script>

<style>
/* 重置样式 */
body,
dl,
dd,
ul,
ol,
h1,
h2,
h3,
h4,
h5,
h6,
p,
form,
header,
section,
article,
footer {
  margin: 0;
}

body,
button,
input,
select,
textarea {
  font-family: Helvetica Neue, Tahoma, Arial, PingFangSC-Regular,
    Hiragino Sans GB, Microsoft Yahei, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
}

em,
b {
  font-style: normal;
}

a {
  text-decoration: none;
}

img {
  border: 0;
}

button,
input,
select,
textarea {
  font-size: 100%;
  outline: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th,
ul,
ol {
  padding: 0;
}

ul {
  list-style: none;
}
</style>

<style lang="less" scoped>
.btmbar {
  width: 100%;
  height: 2.9375rem;
  display: flex;
  position: absolute;
  bottom: 0;
  .btma {
    flex: 1;
    color: #999999;
    background-color: #fff;
    .btma-p1 {
      padding: 0.0938rem 0;
      text-align: center;
      .btma-p1-icon {
        font-size: 1.25rem;
      }
    }
    .btma-p2 {
      font-size: 0.855rem;
      text-align: center;
    }
  }
  .router-link-active {
    color: #ff6700;
  }
}
</style>
